<template>
  <div id="app">
    <div class="lockDiv" :class="lockTran?'transitionDivShow':'transitionDivUnShow'" v-if="lockShow">
      <div class="lock_text">
        <div class="lock_user">
          <div class="img">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27.13 37.32">
              <defs>
                <clipPath id="clip-path" transform="translate(-5.16)">
                  <rect class="cls-1" style="fill:none;" width="37.46" height="37.32"/>
                </clipPath>
              </defs>
              <g id="图层_2" data-name="图层 2">
                <g id="图层_1-2" data-name="图层 1">
                  <g class="cls-2" style="clip-path:url(#clip-path);">
                    <path class="cls-3" style="fill:#ffffff;" d="M18.81,22.12a3.47,3.47,0,0,0-3.46,3.46,3.29,3.29,0,0,0,.86,2.25v.35a2.59,2.59,0,0,0,5.18,0v-.35a3.28,3.28,0,0,0,.86-2.25,3.36,3.36,0,0,0-3.46-3.46Zm.86,4.66v1a.86.86,0,0,1-1.73,0v-1a1.76,1.76,0,0,1-.86-1.38,1.73,1.73,0,1,1,3.46,0,1.37,1.37,0,0,1-.86,1.38ZM29,15.2v-5a10.19,10.19,0,1,0-20.39,0v5a3.47,3.47,0,0,0-3.46,3.46v15.2a3.47,3.47,0,0,0,3.46,3.46H28.84a3.47,3.47,0,0,0,3.46-3.46V18.66A3.43,3.43,0,0,0,29,15.2Zm-18.66-5a8.47,8.47,0,0,1,16.93,0v5H10.35ZM30.56,33.86a1.73,1.73,0,0,1-1.73,1.73H8.62a1.73,1.73,0,0,1-1.73-1.73V18.66a1.73,1.73,0,0,1,1.73-1.73H28.84a1.73,1.73,0,0,1,1.73,1.73Zm0,0" transform="translate(-5.16)"/>
                  </g>
                </g>
              </g>
            </svg>
          </div>
          <div class="name">{{userName}}</div>
        </div>
        <div class="lock_pass">
          <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
        </div>
        <div class="buttons">
          <div class="button" @click="lockLogin">登陆</div>
          <div class="button" @click="forget">忘记密码</div>
        </div>
      </div>
    </div>
    <router-view></router-view>
    <!--过度层-->
    <div :class="TTDshow?'transitionDivShow':'transitionDivUnShow'" v-if="TDshow">
      <div class="text">
        <span>欢迎来到易住宝收银台</span>
        <span>Welcome Your Comeing</span>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: 'App',
    computed:mapGetters([
      'TTDshow',
      'TDshow',
      'lockShow',
      'lockTran'
    ]),
    data() {
      return{
        userName:'',
        password:'',
        clientHeight: '600px',
      }
    },
    watch:{
      lockShow(val){
        if (val){
          let self = this
          document.oncontextmenu=new Function("event.returnValue=false") //屏蔽鼠标右键
          document.onselectstart=new Function("event.returnValue=false") //禁止先择,也就是无法复制
          document.onkeydown = function(even){
            var key = even.keyCode
            if (key == 123){
              setTimeout(() => {
                self.upstate({key:'lockTran',val:false})
                setTimeout(() => {
                  self.upstate({key:'lockShow',val:false})
                },1000)
                localStorage.removeItem('lockPass');
                self.$router.push('/')
              },1000)
            }
          }
        }else {
          document.oncontextmenu=new Function("event.returnValue=true") //屏蔽鼠标右键
          document.onselectstart=new Function("event.returnValue=true") //禁止先择,也就是无法复制
        }
      },
    },
    created(){
      let self = this
      if (localStorage.getItem('lockPass') != null && localStorage.getItem('lockPass') != 'null'){
        self.upstate({key:'lockShow',val:true})
        self.upstate({key:'lockTran',val:true})
      }
    },
    mounted(){
      let self = this
      self.userName = localStorage.getItem('userName')
    },
    methods:{
      ...mapActions([
        'upstate'
      ]),
      //锁屏登陆
      lockLogin(){
        let self = this
        let pass = localStorage.getItem('lockPass')
        if (self.password == pass){
          this.$message({
            type: 'success',
            message: '解锁成功'
          });
          setTimeout(() => {
            self.upstate({key:'lockTran',val:false})
            setTimeout(() => {
              self.upstate({key:'lockShow',val:false})
            },1000)
            localStorage.removeItem('lockPass');
            self.password = ''
          },1000)
        }else {
          this.$message.error('密码错误');
        }
      },
      //锁屏忘记密码
      forget(){
        let self = this
        this.$confirm('忘记密码，是否重新登陆', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
            self.upstate({key:'lockTran',val:false})
            setTimeout(() => {
              self.upstate({key:'lockShow',val:false})
            },1000)
            localStorage.removeItem('lockPass');
            self.password = ''
            self.$router.push('/')
          },1000)
        })
      }
    }
  }
</script>

<style lang="less">
  body{
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #ecf0f5;
    #app{
      width: 100%;
      height: 100%;
    }
    .messBody{
      background: red;
      color: #fff;
    }
    .messIcon{
      width: 5px;
      height: 5px;
      background: yellow;
      margin-right: 10px;
    }
    .cleanFloat:before,
    .cleanFloat:after {
      display: table;
      content: "";
    }
    .cleanFloat:after {
      clear: both;
    }
    .cleanFloat{
      *zoom: 1;
    }
    /*过渡动画板块*/
    .transitionDivShow,.transitionDivUnShow{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #333;
      z-index: 999;
      .text{
        font-size: 50px;
        color: #fff;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translateX(-50%);
        span:last-child{
          font-size: 25px;
          display: block;
          text-align: center;
        }
      }
    }
    .transitionDivShow{
      opacity: 0;
      animation: showTD 1s;
      -moz-animation: showTD 1s;	/* Firefox */
      -webkit-animation: showTD 1s;	/* Safari 和 Chrome */
      -o-animation: showTD 1s;
      animation-fill-mode:forwards;
    }
    .transitionDivUnShow{
      opacity: 1;
      animation: unShowTD 1s;
      -moz-animation: unShowTD 1s;	/* Firefox */
      -webkit-animation: unShowTD 1s;	/* Safari 和 Chrome */
      -o-animation: unShowTD 1s;
      animation-fill-mode:forwards;
    }
    @keyframes showTD
    {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    @keyframes unShowTD
    {
      from {opacity: 1;}
      to {opacity: 0;}
    }
    .lockDiv{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(51,51,51,.8);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .lock_text{
          width: 250px;
          margin: auto;
          display: flex;
          flex-direction: column;
          .lock_user{
            display: flex;
            flex-direction: column;
            .img{
              width: 100px;
              height: 100px;
              margin-left: auto;
              margin-right: auto;
              svg{
                width: 100%;
                height: 100%;
              }
            }
            .name{
              font-size: 20px;
              color: #fff;
              margin-left: auto;
              margin-right: auto;
              margin-top: 10px;
            }
          }
          .lock_pass{
            margin-top: 20px;
          }
          .buttons{
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            .button{
              color: #fff;
              width: 70px;
              height: 20px;
              font-size: 14px;
              background: #67c23a;
              text-align: center;
              padding: 5px 15px;
              border-radius: 5px;
              cursor: pointer;
            }
            .button:last-child{
              background: #909399;
            }
          }
        }
      }
  }
</style>
